<template>
	<div class="app-container">
		<el-tabs type="border-card">
			<el-tab-pane label="可参加的考试">
				<el-divider v-if="exams.length == 0">当前无考试可参加</el-divider>
				<el-row v-if="loginstate">
					<el-col :span="8" v-for="(item, index) in exams" :key="item.id" :offset="index > 0 ? 2 : 0">
						<el-card :body-style="{ padding: '0px' }" shadow="hover">
							<el-col :span="8"><img src="../../assets/template-blue.png" class="image" /></el-col>
							<el-col :span="14">
								<div style="padding: 14px;">
									<span class="title">
										<b>{{ item.exam.name }}</b>
									</span>
									<span class="text clearfix">
										开始时间:
										<b>{{ item.exam.stime }}</b>
									</span>
									<span class="text clearfix">
										结束时间:
										<b>{{ item.exam.etime }}</b>
									</span>
									<span class="text clearfix">
										试卷标题:
										<b style="color: red;">{{ item.exam.title }}</b>
									</span>
									<span class="text clearfix">
									应考人员:
										<b style="color: red;">{{ item.exam.describe }}</b>
									</span>
										<span class="text clearfix">
									     限考次数:
										<b style="color: red;">{{ item.exam.limit }}</b>
									</span>
								</div>
								<div style="padding: 14px;"><el-button type="success" @click="doExam(item)" round>立即参加</el-button></div>
							</el-col>
						</el-card>
					</el-col>
				</el-row>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>
<script>
import { getToken } from '@/utils/auth';
import { HasExam } from '@/api/exam';
export default {
	data() {
		return {
			currentDate: new Date(),
			loginstate: '',
			exams: [{ exam: {}, userpaper: [], subpro: {} }]
		};
	},
	components: {},
	methods: {
		relogin() {
			var _this = this;
			if (getToken()) {
				this.loginstate = JSON.parse(getToken());
				HasExam(this.loginstate).then(res => {
					_this.exams = res.data;
				});
			}
		},
		doExam(item) {
			if (getToken()) {
				var limit = item.limit;
				var examinfo = {
					examid: item.exam.id,
					user: this.loginstate
				};
				if (limit) {
				this.$alert('1.电脑显示器建议采用1440*960的分辨率以上'+
				'2.请勿刷新页面'+
				'3.答题达到一定数量,建议保存,以免误操作,重新生成试题', '考试前提示！', {
						confirmButtonText: '确定',
						maskClosable: false,
						keyboard: false,
						closable: false,
						callback: action => {
							if(action=='confirm'){
								this.$router.push({ path: '/paper', query: { examinfo } });
							}
						}
					});
					return;
				} else {
					this.$message.error('抱歉，您已经参加并且完成了此次考试，无法再次参加！');
					return;
				}
			} else {
				this.$message.error('无法获取登陆信息，请重新登陆！');
			}
		},
		hasLimitPaper(paper) {
			var limit = false;
			if (paper != undefined && paper != null) {
				if (paper.length > 1 && paper.length <= 3) {
					for (var i = 0; i < paper.length; i++) {
						if (paper[i].finish < 100) {
							limit = true;
						}
					}
				} else if (paper.length == 0) {
					limit = true;
				}
			} else {
				limit = true;
			}
			return limit;
		}
	},
	mounted() {
		var _this = this;
		_this.relogin();
		//全局bus
		this.$bus.on('OnLoginState', function() {
			_this.relogin();
		});
	}
};
</script>
<style>
.time {
	font-size: 13px;
	color: #999;
}

.text {
	margin-top: 13px;
	line-height: 12px;
}

.button {
	padding: 0;
	float: right;
}

.image {
	padding: 20px;
}

.clearfix:before,
.clearfix:after {
	display: table;
	content: '';
}

.clearfix:after {
	clear: both;
}
.title {
	font-size: 24px;
	color: red;
}
</style>
